<!-- 经纪人选择 -->
<template>
    <ConfirmBox
        :title="title"
        :confirmText="confirmText"
        titleClass="bg-white"
        @confirm="releaseSource"
    >
        <z-paging
            ref="paging"
            v-model="list"
            @query="queryList"
            :fixed="false"
            :paging-style="{
                height: '100%',
            }"
            ><view
                v-for="(item, index) in list"
                :key="index"
                :value="item"
                class="flex mx-4 my-2 p-4 bg-white rounded-lg justify-between items-center"
                @click="selectItem(index)"
            >
                <view>
                    <image
                        :src="item.icon"
                        mode="scaleToFill"
                        class="w-16 h-16 rounded-full"
                    />
                </view>
                <view class="w-2/3">
                    <view class="flex items-end">
                        <view class="text-base font-bold mr-2">{{
                            item.name
                        }}</view>
                        <view class="text-orange-500">{{ item.score }}分</view>
                    </view>
                    <view class="flex space-x-2">
                        <view
                            v-for="(child, idx) in item.tips"
                            :key="idx"
                            class="bg-gray-100 px-2 py-1 rounded-sm"
                            >{{ child }}</view
                        >
                    </view>
                    <view class="text-gray-500 leading-7">{{ item.desc }}</view>
                </view>
                <view>
                    <uni-icons
                        type="checkbox-filled"
                        color="#0a87fa"
                        v-if="selectList.indexOf(index) > -1"
                        size="30"
                    ></uni-icons>
                    <uni-icons
                        type="circle"
                        color="#a3af9c"
                        v-else
                        size="30"
                    ></uni-icons>
                </view>
            </view>
        </z-paging>
    </ConfirmBox>
</template>
<script setup lang="ts">
import ConfirmBox from "@/components/ConfirmBox/index.vue";
import { $global } from "@/store";
import type { brokerType } from "@/types";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const releaseSource = () => {
    uni.$emit("update", selectList.value);
    $global.movePath("", true);
};

const title = ref("");
const confirmText = ref("");
onLoad((e) => {
    if (e && e.type == "select") {
        title.value = "选择经纪人";
        confirmText.value = "选择";
    } else {
        title.value = "选择联动经纪人";
        confirmText.value = "发布联动";
    }
});

const list = ref<brokerType[]>([]);

const paging = ref();

const loadPage = (page: number) => {
    return new Promise((resolve) => {
        resolve([
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
            {
                id: "asdabhfahf",
                name: "张三",
                icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
                score: "5.0",
                tips: ["5年经验", "有亲和力"],
                desc: "xxxx公司",
            },
        ]);
    });
};
const queryList = (pageNo: number, pageSize: number) => {
    console.log("加载");
    if (list.value.length > 20) {
        paging.value.complete([]);
        return;
    }
    loadPage(pageNo)
        .then((res) => {
            paging.value.complete(res);
        })
        .catch((_) => {
            paging.value.complete(false);
        });
};

const selectList = ref([0, 1]);

const selectItem = (idx: number) => {
    const ItemIdx = selectList.value.indexOf(idx);
    if (ItemIdx > -1) {
        selectList.value.splice(ItemIdx, 1);
    } else {
        selectList.value.push(idx);
    }
};
</script>
<style scoped lang="scss"></style>
